<template>
  <div class="demo">
    <div class="demo-title">热门标签</div>
    <div class="demo-content">
      <span :style="{ marginRight: '8px' }">Categories:</span>
      <template v-for="tag in state.tags" :key="tag">
        <Tag.CheckableTag
          :checked="state.selectedTags.indexOf(tag) > -1"
          @change="(checked) => handleChange(tag, checked)"
        >
          {{ tag }}
        </Tag.CheckableTag>
      </template>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive } from 'vue';
  import Tag from '@sscd/tag';
  const state = reactive({
    tags: ['Movies', 'Books', 'Music', 'Sports'],
    selectedTags: [] as string[],
  });
  const handleChange = (tag: string, checked: boolean) => {
    const { selectedTags } = state;
    const nextSelectedTags = checked
      ? [...selectedTags, tag]
      : selectedTags.filter((t) => t !== tag);
    console.log('You are interested in: ', nextSelectedTags);
    state.selectedTags = nextSelectedTags;
  };
</script>
